<template>
	<view>
		<bg-video></bg-video>
		<cu-custom bgColor="bg-pink" :isBack="true">
			<block class="text-white" slot="content">新增预约</block>
		</cu-custom>
		<view>
			<view>
				<view class="cu-form-group ">
					<view class="title">门店</view>
					<view class="text-cut text-lg">{{astore.sname}}</view>
					<!-- <zqs-select :multiple="false" :list="mds" :showSearch="false" label-key="sname" value-key="storeid"
						title="选择门店" clearable v-model="aroomyyjl.storeid"></zqs-select> -->
				</view>
				<!-- <view v-if="astore" class="cu-card case bg-white">
					<view class="cu-item shadow">
						<view class="image">
							<image :src="astore.cover" mode="widthFix"></image>
							<view class="cu-bar bg-pink flex flex-direction padding align-start">
								<view class="text-cut text-lg">{{astore.sname}}</view>
								<view class="text-cut">{{astore.address}}</view>
							</view>
						</view>
					</view>
				</view> -->
			</view>
			<view class="margin-top">
				<view class="cu-form-group">
					<view class="title">房间</view>
					<view class="text-cut text-lg">{{aroom.rname}}</view>
					<!-- <zqs-select :multiple="false" :list="rooms" :showSearch="false" label-key="rname" value-key="roomid"
						title="选择房间" clearable v-model="aroomyyjl.roomid"></zqs-select> -->
				</view>
				<!-- <view v-if="aroom" class="cu-card case bg-white">
					<view class="cu-item shadow">
						<view class="image">
							<image :src="aroom.cover" mode="widthFix"></image>
							<view class="cu-bar bg-pink flex flex-direction padding align-start">
								<view class="text-cut text-lg">{{aroom.rname}}</view>
								<view class="text-cut">
									<text>{{aroom.mj}}㎡</text>
									<text>{{aroom.yjds}}个垫子</text>
									<text>容纳 {{aroom.mj}}人</text>
								</view>
							</view>
						</view>
					</view>
				</view> -->
			</view>

			<view v-if="aroom.jyms == 'SD'" class="margin-top">
				<view class="cu-form-group">
					<view class="title">时段</view>
					<view @click="openDate" class="bg-white select ">
						<text>{{dateOption.sd}}</text>
						<text>~</text>
						<text>{{dateOption.ed}}</text>
					</view>
				</view>
				<view>
					<yyjl-dates @datesChange="datesChange" :dateYyjl="dates" />
				</view>
				<xiaomiaogu-good-date-picker ref="goodHourPicker" @change="changeDate" :option="dateOption">
					
				</xiaomiaogu-good-date-picker>
			</view>
			
			<!--  -->

		</view>
		<view class="padding bg-white">
			<text>合计金额：{{aroomyyjl.amont/100}}</text>
		</view>
		<view class="padding">
			<button @click="save" class="cu-btn block bg-pink lg">用房申请</button>
		</view>
	</view>
</template>

<script>
	import yyjlBydatesVue from './yyjlBydates.vue';
	export default {
		components: {
			"yyjl-dates": yyjlBydatesVue
		},
		data: function() {
			return {
				dateOption: {
					isRange: true,
					isModal: true,
					isShowSubmit: false,
					sd: "开始日期",
					ed: "结算日期",
					dateNum: 0,
					cd: "yyyy-MM-dd"
				},
				mds: [],
				astore: {},
				rooms: [],
				aroom: {},
				aroomyyjl: {
					rmorderid: "",
					jlid: this.store.state.jl.jlid,
					roomid: "",
					storeid: "",
					amont: 0,
					pflg: false,
					tflg: "P"
				},
				aroomyyjlitems: [],
				yyjls: [],
				checkedDates: {},
				dates: {
					
				}
			};
		},
		onLoad: function(option){
			this.aroom.roomid = option.roomid;
			this.astore.storeid = option.storeid;
			this.loadData();
		},
		methods: {
			loadData: function() {
				this.api("/room/info/get").send({
					roomid: this.aroom.roomid
				}).then(data => {
					this.aroom = data.room;
					this.astore = data.astore;
				});
			},
			openDate: function() {
				this.$refs.goodHourPicker.open();
			},
			changeDate: function(e) { //单选择完日期回调，
				this.dateOption.cd = e.currentDate; //单选模式下返回当前选择的日期
				this.dateOption.sd = e.startDate; //区间选择模式下返回当前选择的开始日期
				this.dateOption.ed = e.endDate; //区间选择模式下返回当前选择的结束日期
				this.dateOption.dateNum = e.dateNum; //区间选择模式下返回的开始于结束日期的天数
				
				if (this.aroom.jyms == 'SD') {
					this.api("/yy/range/date").send({
						roomid: this.aroom.roomid,
						cds: this.dateOption.sd,
						cde: this.dateOption.ed
					}).then(data => {
						this.dates = data.aa;
					});
				} else if (this.aroom.jyms == 'DL') {
					this.api("/yy/range/daily").send({
						roomid: this.aroom.roomid,
						cds: this.dateOption.sd,
						cde: this.dateOption.ed
					}).then(data => {
						this.dates = data.aa;
					});
				}
				
				
				
			},
			
			
			datesChange: function(yyjls) {
				this.yyjls = yyjls;
				this.aroomyyjl.amont = 0;
				for (let key in yyjls) {
					let item = yyjls[key];
					this.aroomyyjlitems.push({
						itemid: "",
						rmorderid: "",
						cd: item.cd,
						st: item.aroomhourlyprices.st,
						et: item.aroomhourlyprices.et,
						roomid: this.aroom.roomid,
						storeid: this.astore.storeid,
						hid: item.aroomhourlyprices.hid,
						price: item.aroomhourlyprices.price,
						statu: "U"
					});
					
					this.aroomyyjl.amont = this.aroomyyjl.amont + item.aroomhourlyprices.price;
					
				}
			},
			save: function() {
				this.api("/yy/info").send({
					roomid: this.aroom.roomid,
					storeid: this.astore.storeid,
					jlid: this.aroomyyjl.jlid,
					yyjls: this.yyjls
				}).then(data => {
					this.aroomyyjl = data.aroomyyjl;
					this.aroomyyjlitems = data.aroomyyjlitems;
					
					if (this.aroomyyjl.pflg) {
						this.message.confirm({
							content: "预约成功",
							showCancel: false,
							complete: () => {
								uni.navigateBack();
							}
						});
					} else {
						this.pay.exePay(JSON.parse(this.aroomyyjl.prepaydata)).then(data => {
							this.message.confirm({
								content: "预约成功",
								showCancel: false,
								complete: () => {
									uni.navigateBack();
								}
							});
						});
					}
					
					
					
					
					
				});
			},
		}
	}
</script>

<style>
</style>